//头部导航
<template>
    <div class="my_header">

        <div class="left">
           <van-icon name="wap-nav" size="22px"/>
        </div>

        <div class="content">
            <div :class="{active:currentTag === 1}" @click="handleClick(1)">我的</div>
            <div :class="{active:currentTag === 2}" @click="handleClick(2)">发现</div>
            <div :class="{active:currentTag === 3}" @click="handleClick(3)">云村</div>
            <div :class="{active:currentTag === 4}" @click="handleClick(4)">会员</div>
        </div>

        <div class="right">
           <van-icon name="search" size="22px"/>
        </div>

    </div>
</template>
<script setup>
    import {ref} from 'vue'
    import router from '@/router/index.js'

    let currentTag = ref(2)
    const handleClick = (tag)=>{
        console.log(tag);
        currentTag.value = tag
        router.push({name:tag ===1?'mine': tag ===2?'discover': tag ===3?'yuncun':'video' })
    }

</script>
<style scoped>
    .my_header {
        display: flex;
        justify-content:space-between;
    }

    .my_header .content {
        display: flex;
        width:180px;
        justify-content:space-around;
    }
</style>